<template>
  <div class="dns-manager">
    <div class="glass-panel config-section">
      <h2 class="section-title">阿里云配置</h2>
      <el-form :model="config" label-width="140px">
        <el-form-item label="AccessKey ID">
          <el-input v-model="config.accessKeyId" placeholder="请输入阿里云AccessKey ID"></el-input>
        </el-form-item>
        <el-form-item label="AccessKey Secret">
          <el-input v-model="config.accessKeySecret" type="password" placeholder="请输入阿里云AccessKey Secret"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="glass-panel current-ip">
      <div class="ip-display">
        <div class="ip-label">当前IP地址</div>
        <div class="ip-value">{{ currentIp || 'Loading...' }}</div>
      </div>
      <el-button type="primary" @click="refreshIp" :loading="loading" class="refresh-btn">
        <i class="el-icon-refresh"></i> 刷新IP
      </el-button>
    </div>
    
    <div class="glass-panel domain-settings">
      <h2 class="section-title">DNS管理</h2>
      <el-form :model="form" label-width="80px">
        <el-form-item label="域名" :required="true">
          <el-input v-model="form.domain" placeholder="例如：example.com"></el-input>
        </el-form-item>
        <el-form-item label="主机记录" :required="false">
          <el-input v-model="form.rr" placeholder="可选，例如：www 或 @"></el-input>
        </el-form-item>
        <el-button type="primary" @click="queryRecords" :loading="querying" class="query-btn">
          <i class="el-icon-search"></i> 查询记录
        </el-button>
      </el-form>

      <div class="records-list" v-if="records.length">
        <h3 class="section-title">DNS记录列表</h3>
        <el-table 
          :data="records" 
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ background: 'rgba(0, 0, 0, 0.5)', color: '#fff' }"
          :cell-style="{ background: 'rgba(0, 0, 0, 0.3)', color: '#fff' }"
        >
          <el-table-column prop="RR" label="主机记录"></el-table-column>
          <el-table-column prop="Type" label="记录类型"></el-table-column>
          <el-table-column prop="Value" label="记录值"></el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button 
                size="small" 
                type="primary" 
                @click="updateRecord(scope.row)"
                :disabled="!currentIp"
                class="update-btn"
              >
                <i class="el-icon-upload2"></i> 更新IP
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="message glass-panel" v-if="message">
      <i class="el-icon-info"></i> {{ message }}
    </div>
  </div>
</template>

<script>
import ipService from '../services/ipService'
import { Core } from '@alicloud/pop-core'

export default {
  name: 'DnsManager',
  data() {
    return {
      config: {
        accessKeyId: '',
        accessKeySecret: ''
      },
      currentIp: '',
      loading: false,
      querying: false,
      updating: false,
      message: '',
      form: {
        domain: '',
        rr: ''
      },
      records: []
    }
  },
  methods: {
    async refreshIp() {
      this.loading = true
      try {
        this.currentIp = await ipService.getCurrentIp()
        this.message = '获取IP成功'
      } catch (error) {
        this.message = '获取IP失败: ' + error.message
      } finally {
        this.loading = false
      }
    },
    createClient() {
      if (!this.config.accessKeyId || !this.config.accessKeySecret) {
        throw new Error('请先配置阿里云AccessKey')
      }
      return new Core({
        accessKeyId: this.config.accessKeyId,
        accessKeySecret: this.config.accessKeySecret,
        endpoint: 'https://dns.aliyuncs.com',
        apiVersion: '2015-01-09'
      })
    },
    async queryRecords() {
      if (!this.form.domain) {
        this.message = '请输入域名'
        return
      }
      
      this.querying = true
      try {
        const client = this.createClient()
        const params = {
          DomainName: this.form.domain
        }
        if (this.form.rr) {
          params.RRKeyWord = this.form.rr
        }
        const result = await client.request('DescribeDomainRecords', params, { method: 'POST' })
        this.records = result.DomainRecords.Record
        this.message = '获取记录成功'
      } catch (error) {
        this.message = '获取记录失败: ' + error.message
      } finally {
        this.querying = false
      }
    },
    async updateRecord(record) {
      this.updating = true
      try {
        const client = this.createClient()
        await client.request('UpdateDomainRecord', {
          RecordId: record.RecordId,
          RR: record.RR,
          Type: record.Type,
          Value: this.currentIp
        }, { method: 'POST' })
        this.message = 'DNS记录更新成功'
        // 刷新记录列表
        await this.queryRecords()
      } catch (error) {
        this.message = 'DNS记录更新失败: ' + error.message
      } finally {
        this.updating = false
      }
    }
  },
  mounted() {
    this.refreshIp()
  }
}
</script>

<style scoped>
.dns-manager {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a1a, #2d3436);
  color: #ffffff;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 20px;
}

.section-title {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 1.5em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.config-section {
  margin-bottom: 30px;
}

.current-ip {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ip-display {
  display: flex;
  flex-direction: column;
}

.ip-label {
  font-size: 0.9em;
  color: #aaa;
  margin-bottom: 5px;
}

.ip-value {
  font-size: 1.8em;
  font-weight: 600;
  color: #fff;
}

.domain-settings {
  margin: 20px 0;
}

.records-list {
  margin-top: 30px;
}

.message {
  padding: 15px 20px;
  background: rgba(240, 249, 235, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 自定义 Element UI 组件样式 */
::v-deep .el-input__inner {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

::v-deep .el-form-item__label {
  color: #fff !important;
}

.refresh-btn, .query-btn, .update-btn {
  background: linear-gradient(135deg, #00b4db, #0083b0);
  border: none;
  padding: 12px 25px;
  transition: all 0.3s ease;
}

.refresh-btn:hover, .query-btn:hover, .update-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.custom-table {
  background: transparent !important;
}

::v-deep .el-table {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

::v-deep .el-table__row:hover > td {
  background: rgba(255, 255, 255, 0.1) !important;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(255, 255, 255, 0.15) !important;
}

::v-deep .el-button--primary {
  background: linear-gradient(135deg, #00b4db, #0083b0);
  border: none;
}

::v-deep .el-button--primary:hover {
  background: linear-gradient(135deg, #0083b0, #00b4db);
}
</style>